﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>微分销--结算页</title>

    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="css/pages-getOrderInfo.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-cart.css"/>
</head>

<body>
	<!--head-->
	<div id="orderInfoApp">
		<div class="top">
			<shortcut />
		</div>

	<div  class="cart py-container">

			<!--logoArea-->
			<div class="logoArea">
				<div class="fl logo"><span class="title">结算页</span></div>
			</div>

		<!--主内容-->
		<div class="checkout py-container">
			<div class="checkout-tit">
				<h4 class="tit-txt">填写并核对订单信息</h4>
			</div>
		

		
			<div class="checkout-steps">
				<div class="step-tit">
					<h5>购买信息</h5>
				</div>

				<div class="step-cont">
					<!-- <p>
						<span>套餐名称：16G内存、红色、250G固态硬盘</span><br/>
						<span>价格：￥2000</span><br/>
						<span>分成：￥20/个</span><br/>
					</p> -->
					<div class="cart-main">
						<div class="yui3-g cart-th">
							<div class="yui3-u-1-4">商品名称</div>
							<div class="yui3-u-1-4">套餐名称</div>
							<div class="yui3-u-1-8">单价（元）</div>
							<div class="yui3-u-1-8">分成（元）</div>
							<div class="yui3-u-1-8">购买数量</div>
							<div class="yui3-u-1-8">小计（元）</div>
						</div>
						<div class="cart-item-list">
		
							<div class="cart-body">
								<div class="cart-list">
									<ul v-for="(sku, index) in goods.wxbGoodSkus" :key="index" class="goods-list yui3-g" >
										<li class="yui3-u-3-24" style="text-align: center;">
											{{goods.goodName}}
										</li>
										<li class="yui3-u-6-24" style="text-align: center;"><span  >{{sku.skuName}}</span></li>
										<li class="yui3-u-4-24" style="text-align: center;"><span  class="price" >{{sku.skuPrice}}</span></li>
										<li class="yui3-u-4-24" style="text-align: center;"><span  class="price" >{{sku.skuPmoney}}</span></li>
										<li class="yui3-u-3-24" style="text-align: center;"><span  class="price" >
											<button @click="decry(index)">-</button>
												<input v-model="order.wxbGoodSkus[index].num"  style="width: 40px;" type="text"/>
											<button @click="incre(index)">+</button>
										</span></li>
										<li class="yui3-u-4-24" style="text-align: center;"><span  class="price" >{{(order.wxbGoodSkus[index].num)*sku.skuPrice}}</span></li>
									</ul>
								</div>
							</div>
						</div>
		
					</div>

				</div>
				<!--收件人信息-->
				<div class="step-tit">
					<h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false" class="newadd">新增收货地址</a></span></h5>
				</div>
				<div class="step-cont">
					<div class="addressInfo">
						<ul class="addr-detail">
							<li class="addr-item" v-for="(addr,i) in addressList" :key="i" @click="chooseAddress(i)">
							  <div>
								  
								<div class="con address">
									<a href="javascript:;" >{{addr.locName}}<span title="点击取消选择"></span>&nbsp;</a>
									<span>&nbsp;&nbsp;&nbsp;{{addr.locInfo}}</span>
									<span>&nbsp;&nbsp;&nbsp;{{addr.locTel}}</span>
									<span class="base">默认地址</span>
									<span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" >编辑</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></span>
								</div>
							  </div>

							</li>
						</ul>
						<!--添加地址-->
                          <div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit">
						  <div class="modal-dialog">
						    <div class="modal-content">
						      <div class="modal-header">
						        <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
						        <h4 id="myModalLabel" class="modal-title">添加收货地址</h4>
						      </div>
						      <div class="modal-body">
						      	<form action="" class="sui-form form-horizontal">
						      		 <div class="control-group">
									    <label class="control-label">收货人：</label>
									    <div class="controls">
									      <input v-model="address.locName" type="text" class="input-medium">
									    </div>
									  </div>

									   <div class="control-group">
									    <label class="control-label">详细地址：</label>
									    <div class="controls">
									      <input v-model="address.locInfo" type="text" class="input-large">
									    </div>
									  </div>
									   <div class="control-group">
									    <label class="control-label">联系电话：</label>
									    <div class="controls">
									      <input v-model="address.locTel" type="text" class="input-medium">
									    </div>
									  </div>
									   <div class="control-group">
									    <label class="control-label">邮箱：</label>
									    <div class="controls">
									      <input  v-model="address.locEmail" type="text" class="input-medium">
									    </div>
									  </div>
									   <div class="control-group">
									    <label class="control-label">地址别名：</label>
									    <div class="controls">
									      <input v-model="address.locType" type="text" class="input-medium">
									    </div>
									    <div class="othername">
									    	建议填写常用地址：<a href="#" class="sui-btn btn-default">家里</a>　<a href="#" class="sui-btn btn-default">父母家</a>　<a href="#" class="sui-btn btn-default">公司</a>
									    </div>
									  </div>
						      	</form>
						      </div>
						      <div class="modal-footer">
						        <button type="button" @click="saveAddress()" data-ok="modal" class="sui-btn btn-primary btn-large">确定</button>
						        <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
						      </div>
						    </div>
						  </div>
						</div>
						 <!--确认地址-->
					</div>
					<div class="hr"></div>

				</div>
				<div class="hr"></div>
				<!--支付和送货-->
				<div class="payshipInfo">
					<div class="step-tit">
						<h5>支付方式</h5>
					</div>
					<div class="step-cont">
						<ul class="payType">
							<li :class="{selected: order.paymentType == 1}" @click="order.paymentType=1" >微信付款<span title="点击取消选择"></span></li>
							<li :class="{selected: order.paymentType == 2}" @click="order.paymentType=2" >货到付款<span title="点击取消选择"></span></li>
						</ul>
					</div>
					<div class="hr"></div>
					
					<div class="hr"></div>
				</div>
				<div class="linkInfo">
					<div class="step-tit">
						<h5>发票信息</h5>
					</div>
					<div class="step-cont">
						<span>普通发票（电子）</span>
						<span>个人</span>
						<span>明细</span>
					</div>
				</div>
				<div class="cardInfo">
					<div class="step-tit">
						<h5>使用优惠/抵用</h5>
					</div>
				</div>
			</div>
		</div>
	
		<div class="clearfix trade">
			<div class="fc-price">应付金额:　<span class="price">¥{{fee}}</span></div>
			<div class="fc-receiverInfo">
				寄送至:{{selectAddress.locInfo}}
				收货人：{{selectAddress.locName}} {{selectAddress.locTel}}
			</div>
		</div>
		<div class="submit">
			<a  @click.prevent = "saveOrder()" class="sui-btn btn-danger btn-xlarge" href="pay.html" >提交订单</a>
		</div>
	</div>

	</div>
	<script src="./js/vue/vue.js"></script>
	<script src="./js/axios.min.js"></script>
	<script src="./js/common.js"></script>
	<script type="text/javascript">
		
		axios.defaults.timeout = 5000;   // 超时时间
		axios.defaults.baseURL = "http://localhost:8040/";  // baseURL   
		
		axios.interceptors.request.use(function(config){
			console.log(config)
			config.withCredentials= false 
			//设置jwt令牌
			config.headers.token=sessionStorage.getItem("token")
			return config;
		})
		
		var orderInfoVm = new Vue({
            el:"#orderInfoApp",
            data:{
				goods:{},
				order:{
				},
				fee:0,
				address:{},
				addressList:[],
				selectAddress:{}
            },
			created(){
				var _this = this;
				//从url中截取goodsId
				var params = this.urlToObj(window.location.href)	
				var goodsId = params.goodsId
				//获取商品信息
				axios.get("/goods/wxb-good/findById?goodsId="+goodsId).then(
					res=>{
						 _this.goods = res.data;
						 console.log(_this.goods)

						 _this.order = _this.goods;

						//遍历order。给每个sku的num赋值0
						for(var i = 0 ;i < _this.order.wxbGoodSkus.length ;i++){
							_this.order.wxbGoodSkus[i].num = 1;	
						}
						
						_this.totalFee();


					}
				)
				
				//获取address列表
				this.findAddressList()


			},
			methods: {
				urlToObj(url) {//解析url获取参数的工具函数
					url = url.split("?")[1];
					//"course1=js&course2=css&course3=jQ"
					var ary = url.split("&");
					//["course1=js","course2=css","course3=jQ"];
					var obj = {};
					ary.forEach((item) => {
						var a = item.split("=");//["course1","js"]
						obj[a[0]] = a[1];
					});
					return obj;
				},
				incre(index){//+
					this.order.wxbGoodSkus[index].num = this.order.wxbGoodSkus[index].num+1;
					console.log(this.order);

					//动态渲染数组
					Vue.set(orderInfoVm.goods.wxbGoodSkus, index, this.order.wxbGoodSkus[index])
					this.totalFee();
				},
				decry(index){//-
					if(this.order.wxbGoodSkus[index].num>0){
						this.order.wxbGoodSkus[index].num = this.order.wxbGoodSkus[index].num-1;
					}

					//动态渲染数组
					Vue.set(orderInfoVm.goods.wxbGoodSkus, index, this.order.wxbGoodSkus[index])
					this.totalFee();
				},
				totalFee(){//总计
					   this.fee = 0;
					   for(var i = 0 ;i < this.order.wxbGoodSkus.length ;i++){
							this.fee += this.order.wxbGoodSkus[i].num * this.order.wxbGoodSkus[i].skuPrice;
						}	
				},
				saveAddress(){//保存物流地址
					var _this = this;
					axios.post("/address/save",this.address).then(
						res=>{
							
							_this.findAddressList();
							alert(res.data.msg);

						}
					)
				},
				findAddressList(){//查询收货地址列表
					var _this = this;
					axios.get("/address/findAdressList").then(
						res=>{
							_this.addressList = res.data;	
						}
					)
				},
				chooseAddress(index){//选择收货地址
					this.selectAddress = this.addressList[index]
				},
				saveOrder(){//保存订单

					//构建订单数据
					this.order.address = this.selectAddress;
					console.log(this.order)
					this.order.skuBuys = this.order.wxbGoodSkus;
					this.order.goodsId = this.order.goodId;
					
					axios.post("/order/save",this.order).then(
						res=>{
							if(res.data.success==true){//订单保存成功
								window.location.href = "/pay.html?orderId="+res.data.data	
							}else{
								alert(res.data.msg)
							}
						}
					)



				}
			},
			
        });
	</script>

	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->

<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/pages/getOrderInfo.js"></script>
</body>

</html>
